<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>jQuery动画效果</title>
    <meta charset="utf-8">
   
    <style type="text/css">
        div{
            background: red;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <!--定义测试对象-->
    <div></div>

    <br>

    <!--定义按钮-->
    <input type="button" id="hideBtn" value="隐藏"/>
    <input type="button" id="showBtn" value="显示"/>
    <br><br>
    <input type="button" id="fadeInBtn" value="渐显"/>
    <input type="button" id="fadeOutBtn" value="渐淡"/>
    <br><br>
    <input type="button" id="slideUpBtn" value="向上滑动退出"/>
    <input type="button" id="slideDownBtn" value="向下滑动显示"/>
    <br><br>
    <input type="button" id="animateBtn01" value="移动到指定位置"/>
    <input type="button" id="animateBtn02" value="在指定的时间移动到指定位置"/>
    <input type="button" id="animateBtn03" value="移动到指定位置过程中先隐藏后显示"/>

</body>
</html>